import React from "react";
import { Avatar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useEnhanceSelector } from "@/hooks";
import { UserInfo } from "@/type/UserInfoType";
import avatar from "@/assets/avatar.png";
import "./UserHeader.scss";

const UserHeader = () => {
   const navigate = useNavigate();
   const token: string = useEnhanceSelector(state => state.loginStore.loginData).token;
   const userInfo: UserInfo = useEnhanceSelector(state => state.userInfoStore.userInfo);

   return (
      <div className="user-header">
         <div className="avatar">
            <Avatar src={avatar} style={{ "--size": "60px", "--border-radius": "40px" }}></Avatar>
         </div>
         <div className="info" onClick={() => navigate("/login")}>
            <span className="nick-name">{token ? `${userInfo.nick_name || ""}` : "未登录"}</span>
            <span className="login-tip">{token ? `${userInfo.mobile || ""}` : "点击登录账号"}</span>
         </div>
      </div>
   );
};

export default UserHeader;
